<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增公告</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
  layui.use('table', function () {
    var table = layui.table;

    table.render({
      elem: '#test'
      , url: '/annos'
      , toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
      , cols: [[
        {field: 'id', title: '公告id', width: 160, fixed: 'left', unresize: true, sort: true}
        , {field: 'content', title: '公告内容', width: 800, fixed: 'left'}
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
      ]]
      , page: true
    });

    // 头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：' + data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选' : '未全选');
          break;
        case 'add':
          layer.open({
            type: 2,
            title: "新增借阅信息",
            area: ['800px', '800px'],
            maxmin: true, //开启最大化最小化按钮
            shadeClose: true,
            content: "annoAdd.jsp",
            end: function () {
              $(".layui-laypage-btn").click();
            }
          })
          break;

              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      }
      ;
    });

    // 监听行工具事件
    table.on('tool(test)', function (obj) {
      $ = layui.jquery
      var data = obj.data;
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      var id = data.id;
      var name = data.name;

      //console.log(obj)
      if (layEvent === 'del') {
        layer.confirm('确认要删除吗？', function (index) {
          obj.del();
          layer.close(index);
          $.ajax({
            url: '/annoDel',
            method: 'get',
            dataType: 'JSON',
            data: "id=" + id,
            success: function (data) {
              console.log(data.code)
              console.log(data.msg)
              layer.msg(data.msg)
            }
          })
        });
      } else if (layEvent === 'edit') { // 编辑
        // 页面编辑
        layer.open({
          type: 2,
          title: "更改借阅信息",
          area: ['800px', '800px'],
          maxmin: true, //开启最大化最小化按钮
          shadeClose: true,
          content: "annoUpd.jsp?id=" + id,
          end: function () {
            $(".layui-laypage-btn").click();
          }
        });
      }
    });
  });
</script>
</body>
</html>
